<template>
	<view class="merchant">
		<view class="header">
			<view class="user-info">
				<view class="head-logo">
					<image
						src="https://tse1-mm.cn.bing.net/th/id/OIP-C.eDM07Cc_OMJA5Q0KjTV1kQHaIe?w=153&h=180&c=7&r=0&o=5&cb=iwc1&pid=1.7"
						mode="widthFix"></image>
				</view>
				<view class="txt">
					<view class="title ">{{agent.name}}</view>
					<view class="detail">
						<template v-if="agent.name==1">
							<image src="@/static/images/diamond.png" mode="widthFix"></image>
							<text>省级代理</text>
						</template>
						<template v-else>
							<image src="@/static/images/district.png" mode="widthFix"></image>
							<text>市级代理</text>
						</template>

					</view>
				</view>
			</view>
			<image v-if="agent.name==1" class="bg-icon" src="@/static/images/crown.png" mode="widthFix"></image>
			<image v-else class="bg-icon" src="@/static/images/district2.png" mode="widthFix"></image>
		</view>
		<view class="content">
			<view class="title">
				<text>{{agent.area_name}}数据看板</text>
				<text>|</text>
				<text>{{nowTime}}</text>
			</view>
			<view class="info-block">
				<view class="box">
					<view class="name">
						{{agent.area_name}}商户数量
					</view>
					<view class="num text-bold">
						10086
					</view>
					<image class="icon" src="@/static/images/shop.png" mode="widthFix"></image>
				</view>
				<view class="box">
					<view class="name">
						商户让利总金额
					</view>
					<view class="num text-bold">
						<text class="text-xl">￥</text>  10086
					</view>
					<image class="icon" src="@/static/images/money.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="ranking-list">
				<view class="title">
					{{agent.area_name}}商务中心排行版
				</view>
				<view class="rank-content">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData"  :ontouch="true" />
				</view>
			</view>
			<view class="data-situation standard-box">
				<view class="top">
					<view class="title">
						商户数据概况
					</view>
					<picker @change="PickerChange" :value="index" :range="picker">
						<view class="tag-drop-down">
							<text>杭州市</text>
							<text class="icon cuIcon-triangledownfill"></text>
						</view>
					</picker>
				</view>
				<view class="situation-content">
					<view class="situation-box s-1">
						<view class="name">商户活跃度</view>
						<view class="num">10086</view>
						<image src="@/static/images/money-home.png" mode="widthFix"></image>
					</view>
					<view class="situation-box s-2">
						<view class="name">商户活跃率</view>
						<view class="num">80.5%</view>
						<image src="@/static/images/rise.png" mode="widthFix"></image>
					</view>
					<view class="situation-box s-3">
						<view class="name">今日新增用户</view>
						<view class="num">12286</view>
						<image src="@/static/images/hi.png" mode="widthFix"></image>
					</view>
					<view class="situation-box s-4">
						<view class="name">商户增长率</view>
						<view class="num">89.5%</view>
						<image src="@/static/images/ren.png" mode="widthFix"></image>
					</view>
				</view>

			</view>
			<view class="merchant-account standard-box">
				<view class="top">
					<view class="title">
						{{agent.area_name}}商家占比
					</view>
					<view class="tag-drop-down">
						<text>人员分布</text>
						<text class="icon cuIcon-triangledownfill"></text>
					</view>
				</view>
				<view class="merchant-content">
					<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { getToken } from '@/utils/auth'
	import  {getNowTime} from '@/utils/common.js'
	import { census } from '@/api/system/server.js'
	
	export default {
		data() {
			return {
				index: -1,
				picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
				dataDetail:{},//数据详情
				chartData: {},
				nowTime:"",
				opts: {
					legend: {
						show: false
					},
					touchMoveLimit: 24,
					enableScroll: true,
				   xAxis: {
					   axisLineColor:"#fff",
					   gridColor:"#fff",
					   disableGrid: true,
					   scrollShow: true,
					   itemCount: 4,
					},
					  yAxis: {
							 axisLineColor:"#fff",
							 gridColor:"#fff",
					  },
					color: ["#2C68FF"],
					extra:{
						column:{
							width:20,
							barBorderRadius: [ 6, 6,0,0]
						}
					}
				},
				chartData2: {},
				opts2: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "12280",
						fontSize: 18,
						color: "#666"
					},
					subtitle: {
						name: "商户数量",
						fontSize: 12,
						color: "#999"
					}
				}

			}
		},
		computed: {
			...mapGetters(["agent"])
		},
		onReady() {
			this.getColumnData();
			this.getCircularData();
		},
		onLoad(){
			
			this.getTimeing()
			//页面进入加载前先判断下
			if(!getToken()){
				uni.reLaunch({
					url:"/pages/start"
				})	
				
			}else{
				this.getCensusData();
			}
		},
		methods: {
			//获取代理通用数据
			getCensusData(){
				census().then(res=>{
					console.log(this.agent);
					
					console.log(res);
					this.dataDetail=res.data
				})
					
			},
			//定时获取时间
			getTimeing(){
				let timeing=setInterval(()=>{		
					this.nowTime= getNowTime();
				},1000)
			},
			//下拉
			PickerChange(e) {
				this.index = e.detail.value
			},
			//柱形图
			getColumnData() {
				let res = {
					categories: ["杭州市", "宁波市", "徐州市", "金华市", "嘉兴市", "绍兴市"],
					series: [{
						name: "目标值",
						data: [35, 36, 31, 33, 13, 34],
						labelText: "21"
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},

			//环形图
			getCircularData() {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					series: [{
						data: [{
							"name": "一班",
							"value": 50
						}, {
							"name": "二班",
							"value": 30
						}, {
							"name": "三班",
							"value": 20
						}, {
							"name": "四班",
							"value": 18
						},
						{
							"name": "四班",
							"value": 18
						},
						{
							"name": "四班",
							"value": 18
						},{
							"name": "五班",
							"value": 8
						}]
					}]
				};
				this.chartData2 = JSON.parse(JSON.stringify(res));

			},

		},

	}
</script>

<style lang="scss" scoped>
	.merchant {

		.header {
			background-color: #3176FC;
			height: 220rpx;
			position: relative;
			overflow: hidden;

			.user-info {
				margin-top: 40rpx;
				margin-left: 24rpx;
				display: flex;
				align-items: center;

				.head-logo {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 4rpx solid #fff;

					image {
						width: 120rpx;
					}
				}

				.txt {
					margin-left: 24rpx;
					color: #fff;

					.title {
						margin-bottom: 20rpx;
						font-size: 32rpx
					}

					.detail {
						display: flex;
						align-items: center;
						font-size: 24rpx;

						image {
							margin-right: 8rpx;
							width: 40rpx;
						}
					}

				}

			}

			.bg-icon {
				position: absolute;
				right: 28rpx;
				top: -38rpx;
				width: 280rpx;
				opacity: .2;
			}
		}

		.content {
			background-color: #EBF5FF;
			padding: 22rpx 24rpx;
			border-radius: 24rpx 24rpx 0px 0px;
			border: 2rpx solid #fff;
			// border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;
			transform: translateY(-20rpx);

			.title {
				margin: 12rpx 0;

				text {
					font-size: 32rpx;
					font-weight: 600;
				}

				text+text {
					font-size: 28rpx;
					margin-left: 16rpx;
				}
			}

			.info-block {
				margin-top: 28rpx;
				display: flex;
				justify-content: space-between;

				.box {
					border-radius: 24rpx;
					position: relative;
					width: 340rpx;
					padding: 32rpx;
					background: linear-gradient(121deg, #0973F4 0%, #3F96FF 100%);
					color: #fff;

					&::after {
						position: absolute;
						width: 64rpx;
						height: 64rpx;
						background: #fff;
						border-radius: 0 24rpx 0 24rpx;
						content: "";
						right: 0;
						top: 0;
					}

					.icon {
						position: absolute;
						width: 34rpx;
						right: 16rpx;
						top: 16rpx;
						z-index: 1;
					}

					.name {
						margin-top: 10rpx;
						font-size: 28rpx;
						letter-spacing: 2rpx;
					}

					.num {
						font-size: 56rpx;
						margin-top: 32rpx;
						letter-spacing: 2rpx;
					}
				}

				.box+.box {
					background: linear-gradient(180deg, #FC6F02 0%, #FD8D1E 100%);
				}
			}

			.ranking-list {
				min-height: 560rpx;
				padding: 32rpx 36rpx;
				background-color: #fff;
				border-radius: 24rpx;
				margin-top: 24rpx;
				overflow: hidden;

				.title {
					color: #3D3D3D;
					font-size: 28rpx;
					line-height: 52rpx;
					letter-spacing: 1rpx;
				}
				.rank-content{
					// width: 620rpx;
				}
			}

			.data-situation {
				height: 560rpx;

				.situation-content {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.situation-box {
						width: 308rpx;
						height: 180rpx;
						margin-top: 24rpx;
						background-color: #0973F4;
						border-radius: 24rpx;
						padding: 24rpx;
						line-height: 52rpx;
						position: relative;
						overflow: hidden;

						.name {
							font-size: 24rpx;
							letter-spacing: 2rpx;
						}

						.num {
							margin-top: 30rpx;
							font-size: 44rpx;
							letter-spacing: 2rpx;
						}

						image {
							position: absolute;
							right: -14rpx;
							bottom: -10rpx;
							width: 110rpx;
						}
					}

					.s-1 {
						background: linear-gradient(180deg, #D0EBF7 0%, #EEFAFF 100%);

						.num {
							font-weight: 700;
							color: #0973F4;
						}
					}

					.s-2 {
						background: linear-gradient(180deg, #D0EBF7 0%, #EEFAFF 100%);

						.num {
							font-weight: 700;
							color: #0973F4;
						}
					}

					.s-3 {
						background: linear-gradient(180deg, #D5F4EC 0%, #F1FFFC 100%);

						.num {
							font-weight: 700;
							color: #28C445;
						}
					}

					.s-4 {
						background: linear-gradient(180deg, #D2DFFF 0%, #F5F8FF 100%);

						.num {
							font-weight: 700;
							color: #433AFF;
						}
					}
				}

			}

			.merchant-account {
				height: 560rpx;

			}


		}

	}
</style>